<template>
  <div class="skuspec" @click="specShow">
    <div class="cell">
      <div class="left">
        已选
      </div>
      <div class="center">
        <span class="item">
          <template v-if="goods.is_enablespec === 1">
            {{goods.goods_sku ? goods.goods_sku.sku_valuenames + '  ' + goods.goods_buynum + (goods.goods_saletype === 1 ? '件' : '次') : '无'}}
          </template>
          <template v-else>
            {{goods.goods_buynum + (goods.goods_saletype === 1 ? '件' : '次')}}
          </template>
        </span>
      </div>
      <div class="right">
        <i class="more-icon"></i>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    goods: {
      type: Object
    }
  },
  methods: {
    specShow () {
      this.$emit('specShow')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/pub";

  .skuspec {
    margin-top: .25rem;
    padding: 0 .25rem;
    width: 100%;
    background-color: #fff;

    .cell {
      padding: 0;
      display: flex;
      line-height: $default_cell_height;
      font-size: $default_middlefont_size;
      color: $default_subtitle_color;
      &:not(:last-child) {
        border-bottom:  .0125rem solid $default_border_color;
      }
      .left {
        width: 1rem;
        text-align: left;
      }
      .center {
        text-align: left;
        flex: 0 1 calc(100% - 1.5rem);
        overflow: hidden;
        .item {
          color: $default_title_color;
          line-height: $default_middlefont_size + .2rem;
          display: inline-flex;
          margin-bottom: .25rem;
          word-break: break-all;
        }

      }
      .right {
        width: .5rem;
        text-align: right;
      }
    }
  }
</style>
